<div style="margin-top:30px; "></div>
<div class="container device">

    <div class="row">
        <div class="col-xs-12">
            <ol class="breadcrumb">
                <li><a href="#">首页</a></li>
                <li><a href="#/user/dashboard">Dashboard</a></li>
            </ol>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-6 col-md-3">
            <div class="thumbnail">
                <div class="caption">
                    <div class="row">
                        <div class="col-md-7">
                            <h5 class="card-title text-uppercase text-muted mb-0">今日流量</h5>
                            <h2 class="dashboard-h2"><span ng-bind="statistics.todayFlow"></span></h2>
                        </div>
                        <div class="col-md-5">
                                <div class="dashboard-icon">
                                    <i class="fa fa-bar-chart" aria-hidden="true"></i>
                                </div>
                        </div>
                    </div>
                    <p class="mt-3 mb-0 text-muted text-sm">
                        <span class="text-success mr-2" ng-if="statistics.todayFlowOn >= 0">
                            <i class="fa fa-arrow-up"></i>
                            <span ng-bind="statistics.todayFlowOn"></span>%
                        </span>
                        <span class="text-danger mr-2" ng-if="statistics.todayFlowOn < 0">
                            <i class="fa fa-arrow-down"></i>
                            <span ng-bind="statistics.todayFlowOn"></span>%
                        </span>
                        <span class="text-nowrap">同比昨日</span>
                    </p>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-3">
            <div class="thumbnail">
                <div class="caption">
                    <div class="row">
                        <div class="col-md-7">
                            <h5 class="card-title text-uppercase text-muted mb-0">本月流量</h5>
                            <h2 class="dashboard-h2" ng-bind="statistics.monthFlow"></h2>
                        </div>
                        <div class="col-md-5">
                            <div class="dashboard-icon" style="background-color: #fb6340">
                                <i class="fa fa-line-chart" aria-hidden="true"></i>
                            </div>
                        </div>
                    </div>
                    <p class="mt-3 mb-0 text-muted text-sm">
                        <span class="text-success mr-2" ng-if="statistics.monthFlowOn >= 0">
                            <i class="fa fa-arrow-up"></i>
                            <span ng-bind="statistics.monthFlowOn"></span>%
                        </span>
                        <span class="text-danger mr-2" ng-if="statistics.monthFlowOn < 0">
                            <i class="fa fa-arrow-down"></i>
                            <span ng-bind="statistics.monthFlowOn"></span>%
                        </span>
                        <span class="text-nowrap">同比上月</span>
                    </p>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-3">
            <div class="thumbnail">
                <div class="caption">
                    <div class="row">
                        <div class="col-md-7">
                            <h5 class="card-title text-uppercase text-muted mb-0">今年流量</h5>
                            <h2 class="dashboard-h2" ng-bind="statistics.yearFlow"></h2>
                        </div>
                        <div class="col-md-5">
                            <div class="dashboard-icon" style="background-color: #55a30b">
                                <i class="fa fa-area-chart" aria-hidden="true"></i>
                            </div>
                        </div>
                    </div>
                    <p class="mt-3 mb-0 text-muted text-sm">
                        <span class="text-success mr-2" ng-if="statistics.yearFlowOn >= 0">
                            <i class="fa fa-arrow-up"></i>
                            <span ng-bind="statistics.yearFlowOn"></span>%
                        </span>
                        <span class="text-danger mr-2" ng-if="statistics.yearFlowOn < 0">
                            <i class="fa fa-arrow-down"></i>
                            <span ng-bind="statistics.yearFlowOn"></span>%
                        </span>
                        <span class="text-nowrap">同比去年</span>
                    </p>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-3">
            <div class="thumbnail">
                <div class="caption">
                    <div class="row">
                        <div class="col-md-7">
                            <h5 class="card-title text-uppercase text-muted mb-0">本月链接量</h5>
                            <h2 class="dashboard-h2">{{statistics.monthLink}}</h2>
                        </div>
                        <div class="col-md-5">
                            <div class="dashboard-icon" style="background-color: #1b961b">
                                <i class="fa fa-pie-chart" aria-hidden="true"></i>
                            </div>
                        </div>
                    </div>
                    <p class="mt-3 mb-0 text-muted text-sm">
                        <span class="text-success mr-2" ng-if="statistics.monthLinkOn >= 0">
                            <i class="fa fa-arrow-up"></i>
                            <span ng-bind="statistics.monthLinkOn"></span>%
                        </span>
                        <span class="text-danger mr-2" ng-if="statistics.monthLinkOn < 0">
                            <i class="fa fa-arrow-down"></i>
                            <span ng-bind="statistics.monthLinkOn"></span>%
                        </span>
                        <span class="text-nowrap">同比上月</span>
                    </p>
                </div>
            </div>
        </div>
    </div>

    <hr class=" ">

    <div class="row">
        <div class="col-sm-6 col-md-8">
            <div class="container-fluid">
                <div class="navbar-header">
                    <h4><span class="glyphicon glyphicon-hdd" aria-hidden="true"></span> 总体流量走势</h4>
                </div>
                <div class="collapse navbar-collapse bs-example-js-navbar-collapse">

                    <ul class="nav navbar-nav navbar-right">
                        <li id="fat-menu" class="dropdown">
                            <a id="drop3"  class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                                所有设备
                                <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu" aria-labelledby="drop3">
                                <li><a href="">所有设备</a></li>
                                <li role="separator" class="divider"></li>
<!--                                <li><a href="">设备A</a></li>-->
<!--                                <li><a href="">设备B</a></li>-->
<!--                                <li><a href="">设备C</a></li>-->
                            </ul>
                        </li>
                    </ul>
                </div><!-- /.nav-collapse -->
            </div>


            <div id="contain1er" style="width: 100%; height: 400px; position: relative">

            </div>

        </div>
        <div class="col-sm-6 col-md-4">
            <h4><span class="glyphicon glyphicon-hdd" aria-hidden="true"></span> 设备流量排行</h4>
            <div id="someTab">
                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active" ng-click="selectTab(1)">
                        <a href="" aria-controls="home" role="tab" data-toggle="tab">今日</a>
                    </li>
                    <li role="presentation" ng-click="selectTab(2)">
                        <a href="" aria-controls="profile" role="tab" data-toggle="tab">昨日</a>
                    </li>
                    <li role="presentation" ng-click="selectTab(3)">
                        <a href="" aria-controls="tab3" role="tab" data-toggle="tab">本月</a>
                    </li>
                    <li role="presentation" ng-click="selectTab(4)">
                        <a href="" aria-controls="tab4" role="tab" data-toggle="tab">今年</a>
                    </li>
                </ul>

                <!-- Tab panes -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane" ng-class="{active: isSelected(1)}">
                        <ul class="list-group">
                            <li class="list-group-item" ng-repeat="item in deviceRank">
                            {{$index+1}}. {{item.deviceName}} <span class="pull-right">{{item.flow}}MB</span>
                            </li>
                        </ul>
                    </div>
                    <div role="tabpanel" class="tab-pane" ng-class="{active: isSelected(2)}">
                        <ul class="list-group">
                            <li class="list-group-item" ng-repeat="item in deviceRank">
                                {{$index+1}}. {{item.deviceName}} <span class="pull-right">{{item.flow}}MB</span>
                            </li>
                        </ul>
                    </div>
                    <div role="tabpanel" class="tab-pane" ng-class="{active: isSelected(3)}">
                        <ul class="list-group">
                            <li class="list-group-item" ng-repeat="item in deviceRank">
                                {{$index+1}}. {{item.deviceName}} <span class="pull-right">{{item.flow}}MB</span>
                            </li>
                        </ul>
                    </div>
                    <div role="tabpanel" class="tab-pane" ng-class="{active: isSelected(4)}">
                        <ul class="list-group">
                            <li class="list-group-item" ng-repeat="item in deviceRank">
                                {{$index+1}}. {{item.deviceName}} <span class="pull-right">{{item.flow}}MB</span>
                            </li>
                        </ul>
                    </div>
                </div>

            </div>
        </div>
    </div>





</div>
